import * as motion from 'motion/react-client';
import React from 'react';

// 淡入+上升
interface FadeInProps {
  delay?: number; // 延迟
  offset?: number; // 偏移距离
  children: React.ReactNode;
  direction?: any; //'up' | 'down' | 'left' | 'right'; // 方向
  className?: any;
}
export function FadeIn({
  delay = 0,
  offset = 30,
  children,
  direction = 'up', // up,down,left,right
  className,
}: FadeInProps) {
  const directionMap: any = {
    up: { y: [offset, 0] },
    down: { y: [-offset, 0] },
    left: { x: [offset, 0] },
    right: { x: [-offset, 0] },
  };

  return (
    <motion.div
      className={className}
      initial={{ opacity: 0, y: 0 }}
      // whileInView={{ opacity: 1, y: [offset, 0], }}
      whileInView={{
        opacity: 1,
        ...directionMap[direction],
      }}
      viewport={{ once: true }}
      transition={{
        delay: delay,
        duration: 0.8,
      }}
    >
      {children}
    </motion.div>
  );
}
